<template>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">

    <div class="card-list">
      <el-button
        size="small"
        v-permission="'Create'"
        type="primary"
        @click="addRow"
        class="add-button"
      >
        <i class="el-icon-plus" /> 新增
      </el-button>
      <div class="card-container">
        <el-card
          v-for="item in dataList"
          :key="item.id"
          class="algorithm-card"
          shadow="hover"
        >
          <div class="card-content">
            <h3 class="card-title">{{ item.title }}</h3>
            <p class="card-description">{{ item.description }}</p>
            <div class="card-actions">
              <el-button
                size="mini"
                type="primary"
                @click="handleCreateGraph(item)"
              >
                跳转
              </el-button>
              <el-button
                size="mini"
                type="success"
                @click="createPermission(item)"
              >
                授权
              </el-button>
              <el-button
                size="mini"
                type="success"
                @click="openRouteDialog(item)"
              >
                配置路由
              </el-button>
              <el-button
                size="mini"
                type="success"
                @click="handleViewConfig(item)"
              >
                参数查看
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="delRequest(item)"
              >
                删除
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next, sizes, total"
          :total="total"
          :page-size="query.limit"
          :current-page="query.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--    </d2-crud-x>-->
    <el-dialog
      :visible.sync="routeDialogVisible"
      title="配置路由"
      width="50%"
      @close="resetRouteForm"
    >
      <el-form :model="routeForm" label-width="120px">
        <el-form-item label="URL 地址" prop="url" :rules="[{ required: true, message: '请输入URL地址', trigger: 'blur' }]">
          <el-input v-model="routeForm.url" placeholder="请输入URL地址"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="routeForm.description" placeholder="请输入描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="routeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRoute">保存</el-button>
      </div>
    </el-dialog>

    <!-- 配置弹窗 -->
    <el-dialog
      v-model="showConfigDialog"
      v-if="configData !== null"
      :visible.sync="showConfigDialog"
      width="50%"
    >
      <div class="config-container">
        <h2>配置信息</h2>

        <div v-for="(item, index) in configData.configurable_nodes" :key="item.id" class="config-item">
          <div class="config-header">
            <h3>配置 #{{ index + 1 }}: {{ item.name }}</h3>
            <p><strong>ID:</strong> {{ item.id }}</p>
          </div>

          <div class="config-details">
            <h4>参数列表</h4>
            <ul>
              <li v-for="(param, paramIndex) in item.params" :key="paramIndex">
                <strong>参数 {{ paramIndex + 1 }}:</strong> {{ param }}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showConfigDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'

export default {
  name: 'process',
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      routeDialogVisible: false,
      // 配置路由表单数据
      routeForm: {
        id: 0,
        url: '',
        description: ''
      },
      showConfigDialog: false,
      configData: null,
      dataList: [], // 用于存储卡片列表数据
      total: 0, // 数据总条数
      query: {
        page: 1, // 当前页码
        limit: 20 // 每页数量
      }
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      api.GetList(this.query).then(response => {
        this.dataList = response.data.data
        this.total = response.data.total // 假设后端返回总条数
      })
    },
    // 处理每页数量变化
    handleSizeChange(limit) {
      this.query.limit = limit
      this.query.page = 1 // 重置到第一页
      this.loadData()
    },
    // 处理页码变化
    handleCurrentChange(page) {
      this.query.page = page
      this.loadData()
    },
    getCrudOptions () {
      return crudOptions(this)
    },
    getConfigData (row) {
      return crudOptions(row)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      d2CrudPlus.util.dict.clear()
      return api.createObj(row)
    },
    addRow () {
      // 新增逻辑
    },
    updateRequest (row) {
      d2CrudPlus.util.dict.clear()
      return api.UpdateObj(row)
    },
    // 授权
    createPermission (item) {
      this.$router.push({
        name: 'menuButton',
        params: { id: item.id },
        query: { name: item.name }
      })
    },
    delRequest (item) {
      api.DelObj(item.id).then(() => {
        this.loadData() // 删除后重新加载数据
      })
    },
    handleCreateGraph (scope) {
      console.log(scope)
      this.$router.push({
        name: 'EditorDag',
        params: { graph: scope.data },
        query: { name: scope.title }
      })
    }, // 打开配置路由弹窗
    openRouteDialog (scope) {
      console.log(scope)
      api.getRouteConfig(scope.id).then((res) => {
        this.routeForm.url = res.api.url
        this.routeForm.description = res.api.description
      }).finally(() => {
        this.routeForm.id = scope.id
        this.routeDialogVisible = true
      })
    },
    // 保存配置路由
    saveRoute () {
      // 这里你可以调用 API 保存配置
      console.log('保存的路由配置:', this.routeForm)
      api.saveRouteConfig(this.routeForm)
        .then(() => {
          this.$message.success('路由配置保存成功')
          this.routeDialogVisible = false
          this.resetRouteForm()
        })
        .catch(() => {
          this.$message.error('路由配置保存失败')
        })
    },
    // 重置表单数据
    resetRouteForm () {
      this.routeForm = {
        url: '',
        description: ''
      }
    },
    async handleViewConfig (scope) {
      console.log('scope', scope)
      // 这里可以用 scope 来获取选中的行数据
      this.configData = await api.getConfig(scope.id)
      console.log('configData', this.configData)
      this.showConfigDialog = true
    }
  }
}
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.card-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap; /* 让按钮在宽度不足时换行 */
}

.algorithm-card {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 300px;
  max-width: 400px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.algorithm-card:hover {
  transform: translateY(-5px);
}

.card-content {
  width: 100%;
  padding: 15px;
}

.card-title {
  font-size: 1.1em;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-description {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 40px;
}
@media (max-width: 768px) {
  .algorithm-card {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .algorithm-card {
    flex: 1 1 100%;
  }
}
</style>

<style scoped>
.config-container {
  margin: 20px;
}

.config-header {
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.config-header h3 {
  margin: 0;
  font-size: 1.2em;
}

.config-details {
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
}

ul {
  padding-left: 20px;
}

li {
  color: #666;
  font-size: 1em;
}

.config-item + .config-item {
  margin-top: 20px;
}
</style>
